<template>

  <div>
    <el-form :model="form" label-width="130px" :rules="rules" ref="form" style="margin-top: -12px;">
      <el-form-item label="价格库存" class="one-label">
        <el-form-item label="规格类型：" label-width="170px">
          <el-radio-group v-model="form.skuFlag" :disabled="form.goodsId || form.auditGoodsId">
            <template v-for="(val,key) in dict.skuFlag">
              <el-radio :label="key">{{val}}</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-show="form.skuFlag == 1" label="商品规格：" label-width="170px">
          <div v-for="(item, index) in form.qualityData" :key="index" class="quality-bar mar-b-15">
            <div class="mar-b-20 position-r qta-item flex">
              <span class="flex-item">
                <el-input v-model="item.skuPropName" class="short-input width-per-50"
                          placeholder="规格名称（比如：颜色）"></el-input>
              </span>
              <i class="el-icon-error font-26 close-quality" @click="removeQta(item, index)"></i>
            </div>
            <el-row :gutter="20" class="pad-l-30 pad-r-30">
              <el-col :span="8" v-for="(subItem, subIndex) in item.skuPropValueList" :key="subIndex"
                      class="flex v-align-c mar-b-10">
                <span class="flex-item mar-r-10 position-r">
                  <el-input v-model="subItem.skuPropValue" class="width-per-100" placeholder="子规格名称（比如：红色）"></el-input>
                  <i class="el-icon-error close-sub" @click="removeSubQta(item.skuPropValueList, subIndex)"></i>
                </span>
                <template v-if="subIndex + 1 == item.skuPropValueList.length">
                  <span class="font-14 font-blue" @click="addSubQta(item)">添加子规格</span>
                </template>
              </el-col>
            </el-row>
          </div>
          <div>
            <el-button type="primary" size="small" @click="addQta">添加规格</el-button>
          </div>
          <div class="table-container pad-t-20 pad-b-20">
            <div
              class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--medium el-table--scrollable-x">
              <div class="el-table__body-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                  <thead class="el-table__header">
                  <tr>
                      <template v-for="(item, indexTh) in form.qualityData">
                        <th width="135" :key="indexTh">
                          <div class="cell text-align-c">{{ item.skuPropName }}</div>
                        </th>
                      </template>
                    <th width="135">
                      <div class="cell text-align-c">图片</div>
                    </th>
                    <th width="135">
                      <div class="cell text-align-c">
                        <el-popover placement="top" width="160" v-model="visiblePopSupplyPrice" v-if="!form.auditGoodsId">
                          <div class="text-align-c pad-b-10">批量设置</div>
                          <el-form label-position="right" style='width: 100%;'>
                            <el-form-item>
                              <el-input v-model="skuParamSettingValue" type="number"/>
                            </el-form-item>
                          </el-form>
                          <div class="mar-t--10" style="text-align: right;">
                            <el-button size="mini" type="text" @click="visiblePopSupplyPrice = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="batchUpdateSkuParamPrice">确定</el-button>
                          </div>
                          <label slot="reference" @click="editSkuParam('3')">
                            <span>供应价(元)</span>
                            <i class="el-icon-circle-plus mar-l-10 font-blue"></i>
                          </label>
                        </el-popover>
                        <label v-else>
                          <span>供应价(元)</span>
                          <i class="el-icon-circle-plus mar-l-10 font-blue"></i>
                        </label>
                      </div>
                    </th>
                    <!--<th width="135">-->
                      <!--<div class="cell text-align-c">-->
                        <!--<el-popover-->
                          <!--placement="top"-->
                          <!--width="160"-->
                          <!--v-model="visiblePopPrice">-->
                          <!--<div class="text-align-c pad-b-10">批量设置</div>-->
                          <!--<el-form label-position="right" style='width: 100%;'>-->
                            <!--<el-form-item>-->
                              <!--<el-input v-model="skuParamSettingValue" type="number"/>-->
                            <!--</el-form-item>-->
                          <!--</el-form>-->
                          <!--<div class="mar-t&#45;&#45;10" style="text-align: right;">-->
                            <!--<el-button size="mini" type="text" @click="visiblePopPrice = false">取消</el-button>-->
                            <!--<el-button type="primary" size="mini" @click="batchUpdateSkuParamPrice">确定</el-button>-->
                          <!--</div>-->
                          <!--<label slot="reference" @click="editSkuParam('1')">-->
                            <!--<span>零售价(元)</span>-->
                            <!--<i class="el-icon-circle-plus mar-l-10 font-blue"></i>-->
                          <!--</label>-->
                        <!--</el-popover>-->
                      <!--</div>-->
                    <!--</th>-->
                    <th width="135">
                      <div class="cell text-align-c">
                        <el-popover
                          placement="top"
                          width="160"
                          v-model="visiblePopStock">
                          <div class="text-align-c pad-b-10">批量设置</div>
                          <el-form label-position="right" style='width: 100%;'>
                            <el-form-item>
                              <el-input v-model="skuParamSettingValue" type="number"/>
                            </el-form-item>
                          </el-form>
                          <div class="mar-t--10" style="text-align: right;">
                            <el-button size="mini" type="text" @click="visiblePopStock = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="batchUpdateSkuParamPrice">确定</el-button>
                          </div>
                          <label slot="reference" @click="editSkuParam('2')">
                            <span>库存</span>
                            <i class="el-icon-circle-plus mar-l-10 font-blue"></i>
                          </label>
                        </el-popover>
                      </div>
                    </th>
                    <th width="135" v-show="false">
                      <div class="cell text-align-c">预警库存</div>
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                    <!-- 规格为1个 -->
                    <template v-if="form.qualityData.length == 1">

                      <tr v-for="(item, index) in form.singleTable" :key="index">
                        <td>
                          <div class="cell text-align-c">
                            {{ item.skuPropValue }}
                          </div>
                        </td>

                        <td>
                          <div class="cell text-align-c">
                            <div  @click="changeImage(index)">
                              <el-upload
                                list-type="picture-mini"
                                action="/api/common/uploadFiles"
                                accept="image/jpeg,image/gif,image/png,image/bmp"
                                name="files" multiple
                                v-loading="getLoading(index)"
                                :data="token"
                                :show-file-list="false"
                                :on-success="handleUploadSuccess"
                                :before-upload="beforeUpload">
                                <img v-if="item.imageUrl" :src="item.imageUrl" width="42px" height="42px" style="margin-left: -1px;margin-top: -1px;">
                                <i v-else class="el-icon-plus"></i>
                              </el-upload>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div class="cell">
                            <el-input v-model="item.supplyPrice" min="0" placeholder="请输入供应价"></el-input>
                          </div>
                        </td>
                        <!--<td>-->
                          <!--<div class="cell">-->
                            <!--<el-input v-model="item.price" min="0" placeholder="请输入建议零售价"></el-input>-->
                          <!--</div>-->
                        <!--</td>-->
                        <td>
                          <div class="cell">
                            <el-input v-model="item.stock" min="0" placeholder="请输入库存"></el-input>
                          </div>
                        </td>
                        <td v-show="false">
                          <div class="cell">
                            <el-input v-model="item.warnStock" placeholder="请输入预警库存"></el-input>
                          </div>
                        </td>
                        <td>
                        </td>
                      </tr>
                    </template>
                    <!-- 规格有2个以上 -->
                    <template v-else>

                      <tr v-for="(item, index) in form.qualityTable" :key="index">

                        <template v-for="(subItem, subIndex) in item">
                          <template v-if="subItem.auditSkuPropId">
                            <td>
                              <div class="cell text-align-c">
                              {{subItem.skuPropValue}}
                              </div>
                            </td>
                          </template>
                        </template>

                        <td>
                          <div class="cell text-align-c">
                            <div  @click="changeImage(index)">
                              <el-upload
                                list-type="picture-mini"
                                action="/api/common/uploadFiles"
                                accept="image/jpeg,image/gif,image/png,image/bmp"
                                name="files" multiple
                                v-loading="getLoading(index)"
                                :data="token"
                                :show-file-list="false"
                                :on-success="handleUploadSuccess"
                                :before-upload="beforeUpload">
                                <img v-if="item.imageUrl" :src="item.imageUrl" width="42px" height="42px" style="margin-left: -1px;margin-top: -1px;">
                                <i v-else class="el-icon-plus"></i>
                              </el-upload>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div class="cell">
                            <el-input v-model="item.supplyPrice" placeholder="请输入供应价" ></el-input>
                          </div>
                        </td>
                        <!--<td>-->
                          <!--<div class="cell">-->
                            <!--<el-input v-model="item.price" min="0" placeholder="请输入建议零售价"></el-input>-->
                          <!--</div>-->
                        <!--</td>-->
                        <td>
                          <div class="cell">
                            <el-input v-model="item.stock"  placeholder="请输入库存"></el-input>
                          </div>
                        </td>
                        <td v-show="false">
                          <div class="cell">
                            <el-input v-model="item.warnStock" placeholder="请输入预警库存"></el-input>
                          </div>
                        </td>
                      </tr>
                    </template>


                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item v-show="form.skuFlag == 0" label="供应价格：" label-width="170px" prop="supplyPrice">
          <el-input v-model="form.supplyPrice" class="short-input width-per-50" min="0" placeholder="例如：100">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <template v-if="form.skuFlag =='0'">
          <el-form-item label="商品库存：" label-width="170px" prop="stock">
            <el-input v-model="form.stock" class="long-input-2"></el-input>
          </el-form-item>
          <el-form-item label="库存预警：" label-width="170px" prop="stockWarn">
            <el-input v-model="form.stockWarn" class="long-input-2" max="8"></el-input>
            <div class="tips">商品库存少于预警数量，商品列表库存数量标红显示，库存为0自动下架</div>
          </el-form-item>
        </template>
        <el-form-item label="已出售数：" label-width="170px" prop="unrealSalesNum">
          <el-input v-model="form.unrealSalesNum" class="long-input-2"></el-input>
          <div class="tips">已出售数不计入商品实际销售的数据统计中,填0则不显示</div>
        </el-form-item>

      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import { getToken } from '@/utils/auth'

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: ['dict'],
    data() {
      return {
        activeName: '1',
        tabDisabled: true,
        token: '',
        fileLoading: false,
        loadingTotal: '0',
        showSingle: 1,
        form: {
          skuFlag: '0',
          distributeType: 1,
          distributeRatio: '',
          distributeFee: '',
          stock: '',
          stockWarn: '',
          storeDistributeType: 1,
          oneStoreDistributeRatio: '',
          twoStoreDistributeRatio: '',
          oneStoreDistributeFee: '',
          twoStoreDistributeFee: '',
          supplyPrice: '',
          unrealSalesNum: '0',
          singleTable: [],
          qualityData: [
            {
              auditSkuPropId: -1,
              skuPropName: '',
              skuPropValueList: [
                {
                  skuPropValue: '',
                  auditSkuPropValueId: -2,
                  auditSkuPropId: -1,
                  skuPropName: ''
                }
              ]
            }
          ],
          qualityTable: [],
          dataTable: []
        },
        ids: [],
        imageIndex: '',
        fileChangeFlag: '0',
        editSkuParamSettingVisible: false,
        skuParamSettingValue: '',
        skuParamSettingLabel: '',
        skuParamSettingTitle: '批量修改SKU零售价',
        skuParamSettingType: '',
        visiblePopPrice: false,
        visiblePopSupplyPrice: false,
        visiblePopStock: false,
        rules: {
          stock: [
            { max: 8, message: '库存最多8个字节' },
            { required: true, message: '请填写商品库存', trigger: 'blur' },
            { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请填写正确商品库存' }
          ],
          stockWarn: [
            { max: 8, message: '库存最多8个字节' },
            { required: false },
            { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请填写正确库存预警' }
          ],
          unrealSalesNum: [
            { max: 8, message: '已经出售库存最多8个字节' },
            { required: false },
            { pattern: /^[0-9]*[0-9][0-9]*$/, message: '请正确输入已经出售库存' }
          ]
        }
      }
    },
    // 初始化页面
    created() {
      this.token = { accessToken: getToken() }
      this.qualityInit()
      this.initGoodsEdit()
    },
    methods: {
      // 删除一级规格
      removeQta(item, index) {
        if (this.form.qualityData.length > 1) {
          this.$confirm('此操作将删除该规格，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.form.qualityData.splice(index, 1)
            this.qualityInit()
          })
        }
      },
      // 添加一级规格
      addQta() {
        const propId = this.getID()
        const valueId = this.getID()
        this.form.qualityData.push({
          auditSkuPropId: propId,
          skuPropName: '',
          skuPropValueList: [
            {
              skuPropValue: '',
              auditSkuPropValueId: valueId,
              auditSkuPropId: propId,
              skuPropName: ''
            }
          ]
        })
        this.qualityInit()
      },
      // 删除子规格
      removeSubQta(item, subIndex) {
        // 子规格不能少于1个
        if (item.length > 1) {
          item.splice(subIndex, 1)
        }
        this.qualityInit()
      },
      // 添加子规格
      addSubQta(item) {
        const valueId = this.getID()
        const data = {
          skuPropValue: '',
          auditSkuPropValueId: valueId,
          imageUrl: '',
          price: '',
          stock: '',
          warnStock: ''
        }
        item.skuPropValueList.push(data)
        this.qualityInit()
      },
      editSkuParam(type) {
        this.skuParamSettingType = type
        this.skuParamSettingValue = ''
        if (type === '1') {
          this.skuParamSettingLabel = '零售价'
          this.skuParamSettingTitle = '批量修改SKU零售价'
        } else if (type === '2') {
          this.skuParamSettingLabel = '库存'
          this.skuParamSettingTitle = '批量修改SKU库存'
        } else if (type === '3') {
          this.skuParamSettingLabel = '供应价'
          this.skuParamSettingTitle = '批量修改SKU供应价'
        }
      },
      // 数列展示
      qualityInit() {
        if (this.form.qualityData.length === 0) {
          this.addQta()
        }

        const arrQta = []
        const itemQta = this.form.qualityData
        if (itemQta.length === 1) {
          const auditSkuPropId = itemQta[0].auditSkuPropId
          const skuPropName = itemQta[0].skuPropName
          const skuPropValueList = itemQta[0].skuPropValueList
          for (let i = 0; i < skuPropValueList.length; i++) {
            skuPropValueList[i].auditSkuPropId = auditSkuPropId
            skuPropValueList[i].skuPropName = skuPropName
          }
          this.form.singleTable = skuPropValueList
          // qualityTable = this.$utils.descartes(arrQta)
        } else {
          const skuCache = {}
          if (this.form.qualityTable.length > 0) {
            this.form.qualityTable.forEach(row => {
              let item = skuCache
              for (const col in row) {
                if (row[col].auditSkuPropValueId) {
                  if (!item[row[col].auditSkuPropValueId]) {
                    item[row[col].auditSkuPropValueId] = { ...row }
                  }
                  item = item[row[col].auditSkuPropValueId]
                }
              }
            })
          }
          this.form.qualityTable = []
          this.showSingle = 0
          for (let i = 0; i < itemQta.length; i++) {
            const auditSkuPropId = itemQta[i].auditSkuPropId
            const skuPropName = itemQta[i].skuPropName
            for (let j = 0; j < itemQta[i].skuPropValueList.length; j++) {
              itemQta[i].skuPropValueList[j].auditSkuPropId = auditSkuPropId
              itemQta[i].skuPropValueList[j].skuPropName = skuPropName
            }
            arrQta.push(itemQta[i].skuPropValueList)
          }
          this.form.qualityTable = this.$utils.descartes(arrQta)
          if (this.form.qualityTable.length > 0) {
            this.form.qualityTable.forEach((row, index) => {
              let item = skuCache
              for (const col in row) {
                if (row[col].auditSkuPropValueId) {
                  if (item[row[col].auditSkuPropValueId]) {
                    item = item[row[col].auditSkuPropValueId]
                  }
                }
              }
              // 新增子规格，设置原来的sku的值
              if (item.price) {
                this.$set(this.form.qualityTable[index], 'price', item.price)
              }
              if (item.stock) {
                this.$set(this.form.qualityTable[index], 'stock', item.stock)
              }
              if (item.imageUrl) {
                this.$set(this.form.qualityTable[index], 'imageUrl', item.imageUrl)
              }
            })
          }
        }
      },
      setQualityTable(dataTable) {
        const skuValueMap = new Map()
        for (let i = 0; i < dataTable.length; i++) {
          skuValueMap.set(dataTable[i].skuValueIds, dataTable[i])
        }

        const qualityTable = this.form.qualityTable
        const qualityData = this.form.qualityData

        if (qualityData.length === 1) {
          const skuPropValueList = qualityData[0].skuPropValueList
          const auditSkuPropId = qualityData[0].auditSkuPropId
          const skuPropName = qualityData[0].skuPropName

          for (let i = 0; i < skuPropValueList.length; i++) {
            skuPropValueList[i].auditSkuPropId = auditSkuPropId
            skuPropValueList[i].skuPropName = skuPropName
            const auditSkuPropValueId = skuPropValueList[i].auditSkuPropValueId
            const array = []
            array.push(auditSkuPropValueId)
            const skuValueKey = array.sort().toString()
            const skuValueObj = skuValueMap.get(skuValueKey)
            skuPropValueList[i].imageUrl = this.$utils.isExist(skuValueObj.imageUrl) ? skuValueObj.imageUrl : ''
            skuPropValueList[i].price = this.$utils.isExist(skuValueObj.price) ? skuValueObj.price : ''
            skuPropValueList[i].supplyPrice = this.$utils.isExist(skuValueObj.supplyPrice) ? skuValueObj.supplyPrice : ''
            skuPropValueList[i].stock = this.$utils.isExist(skuValueObj.stock) ? skuValueObj.stock : ''
            skuPropValueList[i].warnStock = this.$utils.isExist(skuValueObj.warnStock) ? skuValueObj.warnStock : ''
          }

          this.form.singleTable = skuPropValueList
        } else {
          const array = []
          for (let i = 0; i < qualityTable.length; i++) {
            const item = qualityTable[i]
            const skuPropValueList = []
            for (const key in item) {
              if (this.$utils.isExist(item[key].auditSkuPropId)) {
                const auditSkuPropValueId = item[key].auditSkuPropValueId
                skuPropValueList.push(auditSkuPropValueId)
              }
            }

            const obj = {}
            const skuValueKey = skuPropValueList.sort().toString()
            const skuValueObj = skuValueMap.get(skuValueKey)
            if (skuValueObj != null) {
              for (const key in item) {
                obj[key] = item[key]
              }
              obj.imageUrl = this.$utils.isExist(skuValueObj.imageUrl) ? skuValueObj.imageUrl : ''
              obj.price = this.$utils.isExist(skuValueObj.price) ? skuValueObj.price : ''
              obj.supplyPrice = this.$utils.isExist(skuValueObj.supplyPrice) ? skuValueObj.supplyPrice : ''
              obj.stock = this.$utils.isExist(skuValueObj.stock) ? skuValueObj.stock : ''
              obj.warnStock = this.$utils.isExist(skuValueObj.warnStock) ? skuValueObj.warnStock : ''
              array.push(obj)
            } else {
              console.log('sku异常' + skuValueKey)
            }
          }
          this.form.qualityTable = array
        }
      },
      // 批量更新sku价格，库存
      batchUpdateSkuParamPrice() {
        const paramValue = this.skuParamSettingValue
        const skuParamSettingType = this.skuParamSettingType
        const qualityData = this.form.qualityData
        if (qualityData.length === 1) {
          for (let i = 0; i < this.form.singleTable.length; i++) {
            if (skuParamSettingType === '1') {
              this.visiblePopPrice = false
              this.$set(this.form.singleTable[i], 'price', paramValue)
            } else if (skuParamSettingType === '3') {
              this.visiblePopSupplyPrice = false
              this.$set(this.form.singleTable[i], 'supplyPrice', paramValue)
            } else if (skuParamSettingType === '2') {
              this.visiblePopStock = false
              this.$set(this.form.singleTable[i], 'stock', paramValue)
            }
          }
        } else {
          const qualityTable = this.form.qualityTable
          for (let i = 0; i < qualityTable.length; i++) {
            if (skuParamSettingType === '1') {
              this.visiblePopPrice = false
              this.$set(this.form.qualityTable[i], 'price', paramValue)
            } else if (skuParamSettingType === '3') {
              this.visiblePopSupplyPrice = false
              this.$set(this.form.qualityTable[i], 'supplyPrice', paramValue)
            } else if (skuParamSettingType === '2') {
              this.visiblePopStock = false
              this.$set(this.form.qualityTable[i], 'stock', paramValue)
            }
          }
        }
        this.editSkuParamSettingVisible = false
      },
      getID(length) {
        const ids = this.ids
        const id = -parseInt(Math.round(Math.random() * 100000000))
        if (ids.indexOf(id) > 0) {
          this.getID()
        } else {
          ids.push(id)
          this.ids = ids
          return id
        }
      },
      changeImage(index) {
        this.imageIndex = index
      },
      beforeUpload(file) {
        this.fileChangeFlag = '0'
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fileLoading = true
        return (isJPG || isBMP || isGIF || isPNG)
      },
      getLoading(index) {
        const that = this
        if (that.loadingTotal === '1' && this.imageIndex === index) {
          return true
        } else {
          return false
        }
      },
      handleUploadSuccess(res, file) {
        this.loadingTotal = '0'
        if (res.code === 101) {
          const qualityData = this.form.qualityData
          if (qualityData.length === 1) {
            const singleTable = this.form.singleTable
            for (let i = 0; i < singleTable.length; i++) {
              const imageIndex = this.imageIndex
              if (imageIndex * 1 === i) {
                singleTable[i].imageUrl = res.data[0]
              }
            }
          } else {
            const imageIndex = this.imageIndex
            const qualityTable = this.form.qualityTable
            for (let i = 0; i < qualityTable.length; i++) {
              if (imageIndex * 1 === i) {
                qualityTable[i].imageUrl = res.data[0]
              }
            }
          }
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
        this.$forceUpdate()
      },
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          that.form.auditGoodsId = data.auditGoodsId
          const skuFlag = that.$utils.isExist(data.skuFlag) ? data.skuFlag + '' : '0'
          that.form.skuFlag = skuFlag
          that.form.stock = that.$utils.isExist(data.stock) ? data.stock + '' : ''
          that.form.stockWarn = that.$utils.isExist(data.stockWarn) ? data.stockWarn + '' : ''
          that.form.supplyPrice = that.$utils.isExist(data.supplyPrice) ? data.supplyPrice + '' : ''
          that.form.unrealSalesNum = that.$utils.isExist(data.unrealSalesNum) ? data.unrealSalesNum + '' : '0'
          if (skuFlag === '1') {
            const qualityData = data.qualityData
            if (qualityData.length === 1) {
              const skuPropValueList = qualityData[0].skuPropValueList
              for (let i = 0; i < skuPropValueList.length; i++) {
                skuPropValueList[i].imageUrl = ''
                skuPropValueList[i].price = ''
                skuPropValueList[i].supplyPrice = ''
                skuPropValueList[i].stock = ''
                skuPropValueList[i].warnStock = ''
              }
            }
            that.form.qualityData = qualityData
            that.form.dataTable = data.qualityTable
            that.qualityInit()
            that.setQualityTable(data.qualityTable)
          }
        })
      },
      checkForm() {
        const skuFlag = this.form.skuFlag
        // 需要校验的集合
        const checkArrays = []
        if (skuFlag === '0') {
          checkArrays.push('stock')
        }
        checkArrays.push('unrealSalesNum')
        checkArrays.push('stockWarn')
        let ret = true
        let message = ''
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            message = valid
            ret = false
            return false
          }
        })
        if (!ret) {
          this.$message({
            type: 'error',
            message: message
          })
          return false
        }
        if (skuFlag !== '0') {
          // 校验属性名称是否相同
          const propNames = []
          const qualityData = this.form.qualityData
          for (let i = 0; i < qualityData.length; i++) {
            const skuPropName = qualityData[i].skuPropName
            if (!this.$utils.isExist(skuPropName)) {
              this.$message({ type: 'error', message: '商品规格不能为空' })
              return false
            }
            const usePropValueList = []
            const skuPropValueList = qualityData[i].skuPropValueList
            for (let j = 0; j < skuPropValueList.length; j++) {
              const skuPropValue = skuPropValueList[j].skuPropValue
              if (!this.$utils.isExist(skuPropValue)) {
                this.$message({ type: 'error', message: '商品属性不能为空' })
                return false
              }

              if (usePropValueList.indexOf(skuPropValue) !== -1) {
                this.$message({ type: 'error', message: '同规格下属性名称"' + skuPropValue + '"重复' })
                return false
              } else {
                usePropValueList.push(skuPropValue)
              }
            }

            const propName = qualityData[i].skuPropName
            if (propNames.indexOf(propName) !== -1) {
              this.$message({ type: 'error', message: '规格名称"' + propName + '"重复' })
              return false
            } else {
              propNames.push(propName)
            }
          }

          let table = []
          if (qualityData.length === 1) {
            const singleTable = this.form.singleTable
            table = singleTable
          } else {
            const qualityTable = this.form.qualityTable
            table = qualityTable
          }

          let stockTotal = 0
          for (let i = 0; i < table.length; i++) {
            const stock = table[i].stock
            const warnStock = table[i].warnStock
            stockTotal = stockTotal + stock
            if (!this.$utils.isExist(stock)) {
              this.$message({ type: 'error', message: '商品库存不能为空' })
              return false
            }
            if (stock.length > 8) {
              this.$message({ type: 'error', message: '商品库存长度不能超过8个字节' })
              return false
            }

            // 正则表达式校验
            if (this.$utils.isExist(warnStock)) {
              const reg3 = /^[0-9]*[1-9][0-9]*$/
              const pattern3 = new RegExp(reg3)
              if (!pattern3.test(warnStock)) {
                this.$message({ type: 'error', message: '请正确输入预警库存' })
                return false
              }
            }
          }

          // 正则表达式校验
          const reg = /^[0-9]*[1-9][0-9]*$/
          const pattern = new RegExp(reg)
          if (!pattern.test(stockTotal)) {
            this.$message({ type: 'error', message: '请正确输入库存' })
            return false
          }
        } else {
          // 正则表达式校验
          const reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
          const pattern = new RegExp(reg)
          if (!pattern.test(this.form.supplyPrice)) {
            this.$message({ type: 'error', message: '请正确输入供应价格' })
            return false
          }
        }
        return true
      }
    }
  }
</script>


<style lang="less" scoped>
  .table-container {
    min-height: auto;
  }

  .quality-bar {
    background: #f2f2f2;
    border: #e4e4e4 1px solid;
    padding: 10px;

    .close-quality {
      color: #515151;
    }

    .close-sub {
      color: #aeaeae;
      position: absolute;
      right: -6px;
      top: -6px;
      font-size: 18px;
    }

    .qta-item:before {
      content: '';
      position: absolute;
      left: 12px;
      top: 34px;
      width: 1px;
      height: 46px;
      background: #bcbcbc;
    }

    .qta-item:after {
      content: '';
      position: absolute;
      left: 12px;
      top: 79px;
      width: 19px;
      height: 1px;
      background: #bcbcbc;
    }
  }

  .span-bar {
    padding: 0 50px;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input {
    width: 80%;
  }

  .long-input-2 {
    width: 55%;
    margin-right: 5%;
  }

  .long-input-3 {
    width: 55%;
  }

  .short-input {
    width: 20%;
  }

  .short-input-2 {
    width: 25%;
  }

  .default-input {
    width: 55%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .picture {
    width: 130px;
    height: 130px;
    display: block;
  }

  .pic-bar {
    position: relative;

    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }

  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }

  .input-bar-0 {
    width: 35% !important;
  }

  .input-bar-1 {
    width: 40%;
    margin-bottom: 5px !important;
  }

  .input-bar-2 {
    width: 60%;
    margin-bottom: 5px !important;
  }

  .input-bar-3 {
    width: 100%;
    margin-bottom: 5px !important;
  }

  .input-bar-4 {
    width: 35% !important;
  }

  .width-input-1 {
    width: 100% !important;
  }

  .width-input-2 {
    width: 35% !important;
  }

  .width-input-3 {
    width: 30% !important;
  }

  .width-date {
    width: 200px !important;
  }

  .gray-bar {
    background: #e4e4e4;
    padding: 5px 0 0 0;
    margin-bottom: 20px;
  }

  .gray-active {
    margin-right: 20px;
    padding: 15px 13px;

    &.active {
      background: #e4e4e4;
    }
  }

  .radio-top-bar {
    margin-bottom: -22px;
  }

  .noraml-height {
    height: 40px;
  }
</style>
